<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性：【微调：文字或者照片】 
			margin使用问题1：  自适应居中建议使用div，套块元素、行块内元素、行内元素，必须设置宽度
			margin使用问题2：  行元素，加 上下  右左外边距---
			                  行内块：不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以左右】、
			margin使用问题3：垂直外边距
			margin使用问题4：垂直外边距
			*/
			img{
				border: 1px solid red;
				/* margin:1个属性值  顺时针 上 右 下 左 */
				margin: 200px;
				/* margin:2个属性值  顺时针 上下  右左 */
				margin: 10px 200px;
				/* 常用：盒子自适应居中  ---失效 
				行元素：可以设置高宽，在一行显示，无法居中
				
				*/
				margin: 0 auto;
				/* margin:2个属性值  顺时针 上  右左 下 */
				m argin: 100px 200px 300px;
				/* margin:2个属性值  顺时针 上  右 下 左 */
				m argin: 100px 200px 300px 400px;
			}
			h1{
				/* 块内块：可以设置高宽、不在一行内显示、无法居中 ，内置文本
				          text-align:center
				*/
				/* 常用：盒子自适应居中  ---设置宽度 */
				border:1px solid greenyellow;
				margin: 100px 200px;
				text-align:center;
			}
			span{
				/* 行内块：不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以左右】、
				    text-align:center
				 */
				/* 常用：盒子自适应居中  --- */
				border:1px solid greenyellow;
				margin: 100px 200px;
				text-align:center;
			}
			div{
				width: 200px;
				height: 200px;
				background: orangered;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型：四个部分组成：
		                      外边距：边框以外四周，叫做外边框
							  margin属性
							  边框：--
							  内边框：边框以内 与内容 之间距离，叫做内边框
							  内容：块、行、行内元素本身宽高
		
		所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞.png"width="400px" heght="400px" alt="圣诞">
		<span>行内元素：圣诞</span>
	</body>
</html>